<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        background: #222;
        /*样式尺寸 */
        width: 100%;
        height: 100%;
    }
</style>
<body>
<canvas></canvas>
</body>
<script>
    const cvs = document.querySelector('canvas');
    const ctx = cvs.getContext('2d');

    function init() {
        // 原始尺寸 = 样式尺寸 * 缩放倍率 就能保证图片不模糊
        cvs.width = window.innerWidth * devicePixelRatio;
        cvs.height = window.innerHeight * devicePixelRatio;
    }
    init()
    //屏幕能画下多少的列
    const fontSize = 15 * devicePixelRatio
    const columnCount = Math.floor(cvs.width / fontSize)
    //记录每一列的画的文字的索引
    const charIndex = new Array(columnCount).fill(0)

    function draw() {
        ctx.fillStyle = 'rgba(0,0,0,0.1)'
        ctx.fillRect(0, 0, cvs.width, cvs.height)
        ctx.fillStyle = '#6be445'
        ctx.font = `${fontSize}px 微软雅黑`
        ctx.textBaseline = 'top'
        for (let i = 0; i < columnCount; i++) {
            const text = getRandomChar()
            const x = i * fontSize
            const y = charIndex[i] * fontSize
            ctx.fillText(text, x, y)
            if (y > cvs.height && Math.random() > 0.99) {
                charIndex[i] = 0
            } else {
                charIndex[i]++
            }
        }
    }

    //生成随机字符函数
    function getRandomChar() {
        const chars = 'love'
        return chars[Math.floor(Math.random() * chars.length)]
    }

    draw()
    setInterval(draw, 100)

</script>
</html>